@import "../../../assets/css/utils";

.page-root-self {

  min-height: 100%;
  background-color: #fffaf8;


  .top-head {
    background-image: linear-gradient(-110deg, rgb(251, 76, 83) 0%, rgb(253, 179, 124) 100%);
    padding: 0 41px;
    height: 300px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;

    .user-info {
      display: flex;
      align-items: center;
      flex: 1;
    }

    .nickname {
      font-size: 36px;
      color: #ffffff;
    }

    .remark {
      padding-top: 20px;
      font-size: 24px;
      color: #ffffff;
    }

    .detail {
      padding-left: 23px;
    }

    .setting {
      font-size: 48px;
    }

    .icon-wrap {
      width: 90px;
      height: 90px;
      border-radius: 45px;

      img {
        border-radius: 100%;
        width: 100%;
        height: 100%;
      }
    }
  }

  .order-head {
    margin: 0 auto;

    width: 710px;
    height: 186px;
    background-color: #ffffff;
    margin-top: -74px;
    margin-bottom: 30px;

    .title-info {
      padding: 0 35px;
      display: flex;
      height: 74px;
      align-items: center;
      justify-content: space-between;
    }

    .hint-title {
      font-size: 30px;
      color: #2e2e2e;
    }

    .all-title {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #999999;
    }

    .status-all {
      height: 110px;
      display: flex;
      align-items: center;
      justify-content: center;
      $iconMap: (
        wait_pay:29px 30px,
        wait_recive:33px 30px,
        wait_reject:31px 30px,
        wait_success:28px 30px,
      );

      i {
        width: 33px;
        height: 30px;
        @each $key, $value in $iconMap {
          &.#{$key} {
            background: {
              repeat: no-repeat;
              position: center center;
              image: url('../img/i_order_#{$key}.png');
              size: #{$value};
            }
          }
        }
      }

      li {
        height: 100%;
        flex: 1;
        justify-content: center;
        display: flex;
        align-items: center;
        font-size: 24px;
        color: #666;
      }

      .title {
        padding-left: 10px;
        font-size: 26px;
        color: #666666;
      }
    }
  }

  .menu-list {
    margin: 0 auto;
    width: 710px;
    background-color: #fff;

    li {
      display: flex;
      align-items: center;
      padding: 34px 30px;
      justify-content: space-between;
    }

    $iconMap: (
      service:46px 46px,
      password:46px 46px,
      address:46px 46px,
      about:46px 46px,
    );

    i {
      width: 46px;
      height: 46px;
      @each $key, $value in $iconMap {
        &.i-#{$key} {
          background: {
            repeat: no-repeat;
            position: center center;
            image: url('../img/i_menu_#{$key}.png');
            size: #{$value};
          }
        }
      }
    }

    .iconfont{
      font-size: 46px;
      color:#FB4C53;
    }

    .menu-left {
      display: flex;
      align-self: center;
    }

    .title {
      padding-left: 30px;
      font-size: 30px;
      color: #5e636d;
    }
  }

  .sign-out-btn {
    border: 1px solid #f5f5f5;
    width: 80%;
    margin: 20px auto;
    border-radius: 20px;
    font-size: 32px;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
  }
}
